<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>音乐播放器</title>
</head>
<body>
<div class="music-container" id="music-container">
  <div class="music-info">
    <h4 id="title"></h4>
    <div class="progress-container" id="progress-container">
      <div class="progress" id="progress"></div>
    </div>
  </div>
  <audio src="assets/China-X.mp3" id="audio"></audio>
  <div class="cover-container">
    <img src="assets/China-X.jpg" alt="专辑封面" id="cover">
  </div>
  <div class="control-panel">
    <button id="prev" class="action-btn">
      <i class="fas fa-backward"></i>
    </button>
    <button id="play" class="action-btn action-btn-big">
      <i class="fas fa-play"></i>
    </button>
    <button id="next" class="action-btn">
      <i class="fas fa-forward"></i>
    </button>
  </div>
</div>
<div class="bar-chart-wrapper" id="bar-chart-wrapper">
  <div class="bar-chart">
    <canvas id="canvas"></canvas>
  </div>
</div>
<script src="main.js"></script>
</body>
</html>